import { PropType } from "vue";
import MiniToggle from "../Sansan/Model/components/MiniToggle";
/**
 * 详情分类导航，根据Scheme描述分类信息
 */
//根据Schema绘制分类导航
export default defineComponent({
	props: {
		navList: {
			type: Array as PropType<{ label: string | undefined; value: string }[]>,
			default() {
				return [];
			}
		},
		active: {
			type: String,
			default() {
				return "";
			}
		},
		showToggle: {
			type: Boolean,
			default() {
				return true;
			}
		}
	},
	emits: ["change"],
	setup(props, { emit }) {
		const active = ref<string>("");
		const change = (item: any) => {
			active.value = item.value;
			emit("change", item);
		};

		watchEffect(() => {
			change(props.navList?.[0]);
		});

		return () => {
			return (
				<div class="block-nav flex pl-6 pr-6 h-12 text-base">
					{props.navList.map(item => {
						return (
							<div
								onClick={() => change(item)}
								class={`pl-6 pr-6 item ${(props.active || active.value) == item.value ? "active" : ""}`}
							>
								{item.label}
							</div>
						);
					})}
					{props.showToggle && <MiniToggle />}
				</div>
			);
		};
	}
});
